<script setup lang="ts">
import { ref, reactive, onBeforeMount } from "vue";
import service from "~/service";
import UserRole from "./UserRole.vue"
import UserSalesman from "./UserSalesman.vue"

const query = reactive({
    username: '',
    mobile: '',
    inviteCode: ''
})
const page = reactive({
    pageIndex: 1,
    pageSize: 10,
})

const pageTotal = ref(0)

const tableData = ref<any[]>([])
const tableMaxHeight = ref(300)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogType = ref('')
const loading = ref(false)
const user = ref({})
onBeforeMount(() => {
    tableMaxHeight.value = document.body.clientHeight - 242;
    getList()
})

const handleShowDialog = (type: string, row: any) => {
    const title = type === '1' ? '请选择用户的身份' : '请选择用户的角色';
    user.value = row;
    dialogTitle.value = title;
    dialogType.value = type;
    dialogVisible.value = true;

}

const getList = async () => {
    loading.value = true;
    const res = await service.customer.getCustomerList(query, page)
    loading.value = false;
    if (res.code === 200 && res.data) {
        const { list, total } = res.data
        if (list instanceof Array) {
            tableData.value = list
            pageTotal.value = total
        }
    }
}

const handlePaginationChange = () => {
    console.log(page)
}

const handleConfirm = (isRefresh: boolean) => {
    dialogVisible.value = false
    if (isRefresh) {
        getList()
    }
}
</script>

<template>
    <div class="full-flex-column-layout order-list">
        <div class="operation">
            <el-form :inline="true" class="form">
                <el-form-item label="用户名：">
                    <el-input v-model="query.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号码：">
                    <el-input v-model="query.mobile" placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <el-form-item label="邀请码：">
                    <el-input v-model="query.inviteCode" placeholder="请输入邀请码"></el-input>
                </el-form-item>
            </el-form>
            <div class="button-group">
                <el-button>重 置</el-button>
                <el-button type="primary">查 询</el-button>
            </div>
        </div>
        <div class="space"></div>
        <div class="content" v-loading="loading" element-loading-text="数据加载中. . .">
            <el-table :data="tableData" stripe :max-height="tableMaxHeight" style="width: 100%">
                <el-table-column type="index" width="50" />
                <el-table-column prop="username" label="用户名" width="200" />
                <el-table-column prop="mobile" label="手机号码" width="200" />
                <el-table-column prop="identity" label="用户身份" width="200">
                    <template #default="{ row }">{{row.identityName || row.identity}}</template>
                </el-table-column>
                <el-table-column prop="inviteCode" label="邀请码" width="200" />
                <el-table-column label="操作" min-width="120">
                    <template #default="{ row }">
                        <div class="table-operation">
                            <el-button type="primary" @click="handleShowDialog('1', row)">授 权</el-button>
                            <el-button
                                v-if="false"
                                type="primary"
                                @click="handleShowDialog('2', row)"
                            >分 配</el-button>
                            <div v-if="false" class="text">编 辑</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    v-model:currentPage="page.pageIndex"
                    v-model:page-size="page.pageSize"
                    :total="pageTotal"
                    background
                    layout="prev, pager, next, sizes, jumper"
                    @current-change="handlePaginationChange"
                ></el-pagination>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="580px">
            <user-role v-show="dialogType === '1'" :user="user" @confirm="handleConfirm"></user-role>
            <user-salesman v-if="dialogType === '2'"></user-salesman>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
.order-list {
    .form {
        :deep(.el-form-item) {
            margin-bottom: 0px;
        }
        :deep(.el-range-editor .el-range-input) {
            background-color: #f8f8f8;
        }
        :deep(.el-date-editor) {
            --el-date-editor-daterange-width: 260px;
        }
    }
    .pagination {
        display: flex;
        padding-top: 18px;
        justify-content: flex-end;
    }
}
</style>
